<template>
    <div>
        <div class="e-h-400" :id="id"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        id: ''
    },
    mounted() {
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                // text: 'Funnel'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%'
            },
            // toolbox: {
            //     feature: {
            //         dataView: { readOnly: false },
            //         restore: {},
            //         saveAsImage: {}
            //     }
            // },
            legend: {
                data: ['每日登录用户', '进入下单页面', '下单用户', '完成回收']
            },
            series: [
                {
                    name: '占比',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: [
                        { value: 60, name: '下单用户' },
                        { value: 40, name: '完成回收' },
                        { value: 80, name: '进入下单页面' },
                        { value: 100, name: '每日登录用户' }
                    ]
                }
            ]
        };

        option && myChart.setOption(option);
    }
}
</script>

<style lang="scss" scoped>

</style>